<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-form ref="film" :model="film" :rules="filmRules" label-width="120px" v-loading.fullscreen.lock="fullscreenLoading">
                <el-form-item prop="name" label="电影名称:">
                    <el-input v-model="film.name"></el-input>
                </el-form-item>
                <el-form-item prop="imageFile" label="电影海报:">
                    <el-upload class="avatar-uploader" :data="imageFile" ref="upload" :action="getLocation" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="film.poster_url" :src="ip+film.poster_url" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span class="tips">建议尺寸:185*380像素</span>
                </el-form-item>
                <el-form-item label="栏目:">
                    <!-- <el-radio-group v-model="film.type_id">
                        <el-radio v-for="t in types" :label="t.id" :key="t.id">{{t.name}}</el-radio>
                    </el-radio-group> -->
                    <el-checkbox-group v-model="demo">
                        <el-checkbox v-for="t in types" :label="t.id" :key="t.id">{{t.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="一句话简介:" prop="profile">
                    <el-input v-model="film.profile" placeholder="20字以内"></el-input>
                </el-form-item>
                <el-form-item label="导演:" prop="director">
                    <el-input v-model="film.director" placeholder="20字以内"></el-input>
                </el-form-item>
                <el-form-item label="主演:" prop="actor">
                    <el-input v-model="film.actor" placeholder="20字以内"></el-input>
                </el-form-item>
                <el-form-item label="内容简介:" prop="detail">
                    <el-input type="textarea" v-model="film.detail" placeholder="200字以内"></el-input>
                </el-form-item>
                <el-form-item label="流媒体URL:" prop="source_url">
                    <el-input v-model="film.source_url" placeholder="200字以内"></el-input>
                </el-form-item>
                <el-form-item label="电影下载URL:" prop="download_url">
                    <el-input v-model="film.download_url" placeholder="200字以内"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add('film')">保存</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { pic_location, ip } from '../../utils/local.js'
import { mapState } from 'vuex'
import { addFilm, putFilm, getFilmTypes } from '../../api/server.js'
export default {
    data() {
        return {
            types: [{ name: '新片', id: '1' }, { name: '大片', id: '2' }],
            getLocation: pic_location,
            imageFile: {},
            filmRules: {
                name: [{ required: true, message: '请输入电影名称', trigger: 'blur' }],
                profile: [{ required: true, message: '请输入一句话简介', trigger: 'blur' }],
                director: [{ required: true, message: '请输入导演', trigger: 'blur' }],
                actor: [{ required: true, message: '请输入主演', trigger: 'blur' }],
                detail: [{ required: true, message: '请输入内容简介', trigger: 'blur' }],
                source_url: [{ required: true, message: '请输入流媒体url', trigger: 'blur' }],
                download_url: [{ required: true, message: '请输入下载url', trigger: 'blur' }],
                type_id: [{ required: true, message: '请选择电影分类', trigger: 'blur' }],
                imageFile: [{ required: true, message: '请上传电影海报', trigger: 'blur' }],
            },
            fullscreenLoading: false,
            demo: [],
            ip: ip
        }
    },
    created() {
        this.getTypes()
        if (this.film.id) {
            console.log('ids', this.film)
            this.demo = this.film.types_id.split(',').map(it => parseInt(it))
        }
    },
    computed: mapState({
        film: state => state.Film.film
    }),
    methods: {
        back() {
            this.$router.go(-1)
        },
        handleAvatarSuccess(res) {
            console.log('上传成功')
            this.film.poster_url = res.result.filePath
            this.fullscreenLoading = false
        },
        beforeAvatarUpload(file) {
            this.imageFile.pictureFile = file
            this.imageFile.width = 185 * 3
            this.imageFile.height = 380 * 3
            return this.upload(file)
        },
        upload(file) {
            console.log('full', this.fullscreenLoading)
            this.fullscreenLoading = true
        },
        getTypes() {
            let page = 1
            let pageSize = 100
            getFilmTypes({ page, pageSize })
                .then(res => {
                    this.types = res.result
                })
        },
        add(formName) {
            let film = this.film
            film.imageFile = film.poster_url
            film.typesId = this.demo.join(',')
            film.typeId = this.demo[0]
            film.movie_id = film.id
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.film.id) {
                        putFilm(film)
                            .then(res => {
                                this.$message.success('修改成功')
                            })
                    } else {
                        addFilm(film)
                            .then(res => {
                                this.$message.success('新增成功')
                            })
                    }
                }
            })

        },

    }
}
</script>
<style lang="scss" scoped>
.avatar {
  width: 185px;
  height: 380px;
}
.avatar-uploader {
  width: 300px;
  height: 400px;
  border: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-uploader .el-upload {
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  //   margin-left: 240px;
  font-size: 28px;
  color: #8c939d;
  //   width: 140px;
  //   height: 140px;
  line-height: 140px;
  text-align: center;
}
.tips {
  color: grey;
  margin-left: 10%;
}
</style>

